Posted by albercook on December 30, 2009 at 5:31pm
I'm going through a JavaScript tutorial and here is the example.
function show_alert()
{
alert("I am an alert box!");
}
I Drupal when I edit a page I don't have access to the head. Where should I define a new JavaScript function? Is this somehow solved be jQuery?
Comments
drupal_add_js
drupal_add_js('function show_alert() { alert("I am an alert box!"); }', 'inline', 'header');That will work, but it would probably be better to put your javascript functions in a separate file for your module. Then, you just need to do:
drupal_add_js(drupal_get_path('module', 'your_module_name') . '/path/to/your/file.js');Also keep in mind that say if
Also keep in mind that say if you are creating a node (page) when doing it that you aren't using filtered HTML input format or drupal will strip it out when you click save.
Not there yet. Sorry
So I'm trying to learn JavaScript before I learn jQuery and I'm using my Drupal site to practice.
I want to do the following example on a node on my Drupal site. ( Not filtering HTML, Thanks xamox)
function show_alert()
{
alert("I am an alert box!");
}
Now when I put this into my Drupal node it works fine. I'm just wondering about the head tags. If I view source now I have a page with to heads. Should I be defining all of my functions in a .js file like /misc/jquery.js or /misc/textarea.js?
Thanks
Okay, so in my earlier
Okay, so in my earlier response, I thought you were writing a module, not just putting content in a node. My example code will only work in a node if you are using the PHP input filter.
You can't really get anything from node content to the HEAD section without using PHP. So, if you want your code to be loaded in the head section, you need to either use the PHP input filter and the code I posted, modify the template you are using to manually include a .js file or create a module that adds your .js file using my code.You should not be changing the code in core files like /misc/whatever. That will make it a pain to upgrade your Drupal install.
The easiest of the options I mentioned is the PHP input filter. You have to enable it in modules first before it shows up. Then you can write PHP directly into the node content.
Here is the example that I'm
Here is the example that I'm playing with.
http://www.w3schools.com/js/tryit.asp?filename=tryjs_alert
They define a function in the head.
I don't want to edit the template to just play with code examples.
It works but there are two head sections.
I do have the input filter set to php.
If you have the input filter
If you have the input filter set to PHP, you can use the code in my first response. It should work to put the javascript in the head section. You cannot manually put your own head section in the node itself. Drupal does that for you when it renders the template.
The first response is not
The first response is not what I wanted to post. Apparently the forum stripped out a lot of the script. You can see what I'm trying to do at the link in my last email. I'm still confused about where I define a javascript function in drupal.
There are multiple ways. You
There are multiple ways. You could make a separate javascript file and edit your page.tpl.php file in the theme and insert it into the head. You can also make a separate javascript file, and in the theme's .info file you see see a section where it is labeled scripts [] = and you can add additional scripts there. If you do, make sure you go back to the theme admin section and disable and re-enable that theme and clear your cache so it loads.
I also heavily recommend using firebug (http://getfirebug.com/) for firefox if you currently don't, it will save you a ridiculous amount of time when doing JS work. I will once again recommend learning jQuery, it is really worth the time and I think down the road you will be glad you did. For instance here is a quick example of using jquery to do what you did before. You may ask what the advantage to this is, well now you just have to add that class to any CSS property if you want the pop-up to work. There are also a ridiculous amount of jQuery plugins that have some nice effects as well as jQuery being part of drupal core.
<html>
<head>
<script type="text/javascript">
function show_alert()
{
alert("I am an alert box!");
}
$('.input-button').click( function() { show_alert(); } );
</script>
</head>
<body>
<input type="button" class="input-button" />
</body>
</html>
Thanks again for the help.
Thanks again for the help. I'm going to take the time to learn jQuery I just wanted to learn JS first. Sounds like I will use FireBug to learn JS and come back to my Drupal site for jQuery.
Given that I have not yet learned JS, jQuery or Firebug, I still have some questions about your example. I'm sorry if they are stupid questions but I have spent hours reading and have not found the answers. If you are willing can we go one step at a time here.
1) How did you post that example without having the forum strip out all of the script tags?
2) I can paste all of your code directly into the body of a drupal node and it works but somehow I think that is not a good practice since that actual source code then has to head sections. (see next question) Is this really a bad practice? Are there real problems with having two head sections?
3) If I were to edit the page.tpl.php file which parts of your example would I put there? I'm guessing everything between the head tags. Just like a function deceleration in a C program right?
Now off to really learn CSS, JavaScript and jQuery. Back in an hour. LOL
Thanks
Did you look at this?:
Did you look at this?: http://drupal.org/node/756722
Thanks Mr. Isiden but im still lost,im working on Drupal 5x
I'm new to Drupal so can you please elaborate more, im actually looking for a step to step of creating an image slide show using Dynamic Drive scripts, i just need to know where to place the script that should go on the header of the page and where to place what needs to go to the body of the page and where do i put the external js files within my drupal site? e.g with a normal HTML page i would create these tags and place my script on the head section and create and put the link to the js script and it works just fine so but with drupal its different so can you please help me on how do i go about with drupal
Just to be more clearer e.g
These are instructions but i can only get them to work with html page
Simply add the below code inside the section of the page:
/***********************************************
* Ultimate Fade In Slideshow v2.0- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/
var mygallery=new fadeSlideShow({
wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
dimensions: [250, 180], //width/height of gallery in pixels. Should reflect dimensions of largest image
imagearray: [
["http://i26.tinypic.com/11l7ls0.jpg", "", "", "Nothing beats relaxing next to the pool when the weather is hot."],
["http://i29.tinypic.com/xp3hns.jpg", "http://en.wikipedia.org/wiki/Cave", "_new", "Some day I'd like to explore these caves!"],
["http://i30.tinypic.com/531q3n.jpg"],
["http://i31.tinypic.com/119w28m.jpg", "", "", "What a beautiful scene with everything changing colors."] //<--no trailing comma after very last image element!
],
displaymode: {type:'auto', pause:2500, cycles:0, wraparound:false},
persist: false, //remember last viewed slide and recall within same session?
fadeduration: 500, //transition duration (milliseconds)
descreveal: "ondemand",
togglerid: ""
})
var mygallery2=new fadeSlideShow({
wrapperid: "fadeshow2", //ID of blank DIV on page to house Slideshow
dimensions: [250, 180], //width/height of gallery in pixels. Should reflect dimensions of largest image
imagearray: [
["http://i26.tinypic.com/11l7ls0.jpg", "", "", "Nothing beats relaxing next to the pool when the weather is hot."],
["http://i29.tinypic.com/xp3hns.jpg", "http://en.wikipedia.org/wiki/Cave", "_new", "Some day I'd like to explore these caves!"],
["http://i30.tinypic.com/531q3n.jpg"],
["http://i31.tinypic.com/119w28m.jpg", "", "", "What a beautiful scene with everything changing colors."] //<--no trailing comma after very last image element!
],
displaymode: {type:'manual', pause:2500, cycles:0, wraparound:false},
persist: false, //remember last viewed slide and recall within same session?
fadeduration: 500, //transition duration (milliseconds)
descreveal: "always",
togglerid: "fadeshow2toggler"
})
The above code references 1 external file plus 3 images as part of its interface. Download them below (right click, and select "Save As"):
Step 2: Then, insert the following sample HTML for 2 sample Fade In slideshows:
Mark up wise each Slideshow should just be an empty DIV on the page with a unique ID:
Any particular reason you
Any particular reason you need to use this particular slideshow script?
If not my recommendation would be to do it this way
1. Download and install the CCK module with the CCK image field node.
2. Make a new content type called image, or gallery image, or whatever you want really
3. Add an image field to this new content type
4. Download and install views and the views slideshow module
5. create a new view called gallery that is page display
6. use the view to show only content types of gallery or whatever the content type you defined name is before
7. On the same view set it as a slideshow view as opposed to say a html list, table, grid, etc. type view.
Also as I mentioned above I highly recommend installing firebug for firefox. Both are completely free and will help reduce time to debug javascript significantly.
-Anthony
Thanks Mr. Isiden but im still lost,im working on Drupal 5x
I'm new to Drupal so can you please elaborate more, im actually looking for a step to step of creating an image slide show using Dynamic Drive scripts, i just need to know where to place the script that should go on the header of the page and where to place what needs to go to the body of the page and where do i put the external js files within my drupal site? e.g with a normal HTML page i would create these tags and place my script on the head section and create and put the link to the js script and it works just fine so but with drupal its different so can you please help me on how do i go about with drupal
Just to be more clearer e.g
These are instructions but i can only get them to work with html page
Simply add the below code inside the section of the page:
/***********************************************
* Ultimate Fade In Slideshow v2.0- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/
var mygallery=new fadeSlideShow({
wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
dimensions: [250, 180], //width/height of gallery in pixels. Should reflect dimensions of largest image
imagearray: [
["http://i26.tinypic.com/11l7ls0.jpg", "", "", "Nothing beats relaxing next to the pool when the weather is hot."],
["http://i29.tinypic.com/xp3hns.jpg", "http://en.wikipedia.org/wiki/Cave", "_new", "Some day I'd like to explore these caves!"],
["http://i30.tinypic.com/531q3n.jpg"],
["http://i31.tinypic.com/119w28m.jpg", "", "", "What a beautiful scene with everything changing colors."] //<--no trailing comma after very last image element!
],
displaymode: {type:'auto', pause:2500, cycles:0, wraparound:false},
persist: false, //remember last viewed slide and recall within same session?
fadeduration: 500, //transition duration (milliseconds)
descreveal: "ondemand",
togglerid: ""
})
var mygallery2=new fadeSlideShow({
wrapperid: "fadeshow2", //ID of blank DIV on page to house Slideshow
dimensions: [250, 180], //width/height of gallery in pixels. Should reflect dimensions of largest image
imagearray: [
["http://i26.tinypic.com/11l7ls0.jpg", "", "", "Nothing beats relaxing next to the pool when the weather is hot."],
["http://i29.tinypic.com/xp3hns.jpg", "http://en.wikipedia.org/wiki/Cave", "_new", "Some day I'd like to explore these caves!"],
["http://i30.tinypic.com/531q3n.jpg"],
["http://i31.tinypic.com/119w28m.jpg", "", "", "What a beautiful scene with everything changing colors."] //<--no trailing comma after very last image element!
],
displaymode: {type:'manual', pause:2500, cycles:0, wraparound:false},
persist: false, //remember last viewed slide and recall within same session?
fadeduration: 500, //transition duration (milliseconds)
descreveal: "always",
togglerid: "fadeshow2toggler"
})
The above code references 1 external file plus 3 images as part of its interface. Download them below (right click, and select "Save As"):
Step 2: Then, insert the following sample HTML for 2 sample Fade In slideshows:
Mark up wise each Slideshow should just be an empty DIV on the page with a unique ID: